<template>
  <div class="header">
    <div
        style="height: 25px;width: 100%;display: flex;justify-content: right;background: #24292f;border-radius: 1px 1px 0  0;top:0"
        @click="dblBtn"
        data-wails-drag>
      <div data-wails-no-drag style="display: flex;">
        <div class="hover1" style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;"
             @click="miniWindowBtn">
          <LineOutlined style="color: #ffffff;font-size: 15px"/>
        </div>
        <div class="hover1" style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;"
             @click="maxWindowBtn">
          <RetweetOutlined v-if="maxStatus" style="color: aliceblue;font-size: 12px"/>
          <BorderOutlined v-else style="color: #ffffff;font-size: 12px"/>
        </div>
        <div class="hover2"
             style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;border-radius:0 2px 0 0"
             @click="closeBtn">
          <CloseOutlined style="color: #ffffff;font-size: 15px"/>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
import {BorderOutlined, CloseOutlined, LineOutlined, RetweetOutlined} from "@ant-design/icons-vue"
import {ref} from "vue";

export default {
  components: {
    CloseOutlined,
    BorderOutlined,
    LineOutlined,
    RetweetOutlined
  },
  setup() {
    let dblNum = ref({"num": 0, "time": 0})
    let maxStatus = ref(false)
    const miniWindowBtn = () => {
      // window.go.main.App.WindowMinimise()
      window.runtime.WindowMinimise()
    }
    const maxWindowBtn = () => {
      if (maxStatus.value) {
        window.runtime.WindowUnmaximise()
        maxStatus.value = false
      } else {
        window.runtime.WindowMaximise()
        maxStatus.value = true
      }
    }
    // TODO:无法实现双击最大化功能
    const dblBtn = () => {
      if (dblNum.value.num === 0) {
        dblNum.value.num += 1
        dblNum.value.time = new Date().getTime()
      }else if (dblNum.value.num === 1){
        dblNum.value.num = 0
        if (new Date().getTime() - dblNum.value.time < 1000){
          if (maxStatus.value) {
            window.runtime.WindowUnmaximise()
            maxStatus.value = false
          } else {
            window.runtime.WindowMaximise()
            maxStatus.value = true
          }
        }
      }
    }
    const closeBtn = () => {
      window.runtime.Quit()
    }

    return {
      maxStatus,
      miniWindowBtn,
      maxWindowBtn,
      closeBtn,
      dblBtn
    }
  }
}
</script>
<style>
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

.header {
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  border-radius: 3px;
}

.hover1:hover {
  background: #a3a3a3;
}

.hover2:hover {
  background: #b20000;
}
</style>
